<template>
    <transition>
        <view class="mask" :class="mask == 'true' || mask == true ? 'mask-show' : 'mask-show'" @click="Mclose" v-if="show" @touchmove.stop.prevent="preventTouchMove">
            <!-- 加载动画开始 -->
            <!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->
            <view class="loading16"></view>
            <!-- 加载动画结束 -->
            <view class="title">{{ text }}</view>
        </view>
        <!-- 遮罩层-->
    </transition>
</template>

<script scoped="true">
export default {
    name: 'x-loading',
    props: {
        text: String,
        mask: Boolean | String,
        click: Boolean | String,
        show: Boolean,
    },
    data() {
        return {};
    },
    methods: {
        preventTouchMove() {
            return;
        },
        Mclose() {
            // if (this.click == 'false' || this.click == false) {
            //   this.show = false;
            // }
        },
        open() {
            this.show = true;
        },
        close() {
            this.show = false;
        },
    },
};
</script>

<style>
.mask {
    /* pointer-events: none; */
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mask.mask-show {
    background: rgba(255, 255, 255, 1);
}

.title {
    color: #fff;
    font-size: 28upx;
}

/* loading加载动画的css */
.loading16 {
    position: relative;
    width: 30upx;
    height: 30upx;
    border-radius: 50%;
    background: peachpuff;
    -webkit-animation: loading16 1.5s infinite linear;
    animation: loading16 1.5s infinite linear;
}

.loading16:after {
    content: '';
    position: absolute;
    width: 50upx;
    height: 50upx;
    border-top: 10upx solid coral;
    border-bottom: 10upx solid coral;
    border-left: 10upx solid transparent;
    border-right: 10upx solid transparent;
    border-radius: 50%;
    top: -20upx;
    left: -20upx;
}

@-webkit-keyframes loading16 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loading16 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>
